<%@ page contentType="text/html; charset=utf-8"%>
<%--<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>--%>
<%--<%@ taglib uri="http://  b  www.springframework.org/tags" prefix="spring"%>--%>
<%--<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>--%>
<%--<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>--%>
<%--<c:set var="basePath" value="${pageContext.request.contextPath}"/>--%>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>addArticle</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <link href="../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="../../plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
    <script src="../../plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="../../css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>

    <link rel="stylesheet" href="../../plugins/editormd/lib/codemirror/codemirror.min.css">
    <script src="../../plugins/editormd/editormd.min.js"></script>
    <link rel="stylesheet" href="../../plugins/editormd/css/editormd.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <script src="../../plugins/select2/js/select2.min.js"></script>
    <link rel="stylesheet" href="../../plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <script src="../../plugins/jquery.cookie.js"></script>

    <script src="../../js/common.js"></script>
    <style>
        #main{padding:1% 2% 2%;background-color: #f5f5f5;}
        .form-group{padding: 10px 20px 0 20px}
    </style>
</head>
<body>
<div id="main">
    <input id="addTitle" type="text" placeholder="   请输入文章标题,不要超过60个字符" style="width: 99.8%;height:35px;border: 1px solid grey;">

    <div class="editormd" id="test-editormd">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
        <textarea id="articleContent" class="editormd-html-textarea" name="content"></textarea>
    </div>

    <input id="addDescription" type="text" placeholder="  简介" style="width: 1570px;height:35px;border: 1px solid grey;">

    <input id="addKeywords" type="text" placeholder="  关键字" style="width: 1570px;height:35px;border: 1px solid grey;margin-top: 10px;">
    <input id="addCover_image" type="text" placeholder="  图片" style="width: 1570px;height:35px;border: 1px solid grey;margin-top: 10px;">
    <hr>
    <div style="border: 2px solid green;width: 370px;height:85px;">
        <tr>
            <td align="right"><h3 style="display: inline-block"><span class="label label-success">类别</span></h3></td>
            <td>
                <select class="combox" id="sel_productTag" name="recommenderId" multiple>
                </select>
            </td>
        </tr>
    </div>
    <hr>

    <div class="form-group" style="display: inline-block;border: 2px solid green;">
        <label >状态</label>
        <div class="radio">
            <div class="radio radio-inline radio-success">
                <input id="addStatus_0" type="radio" name="addStatus" value="0" checked>
                <label for="addStatus_0">正常 </label>
            </div>
            <div class="radio radio-inline">
                <input id="addStatus_1" type="radio" name="addStatus" value="1">
                <label for="addStatus_1">锁定 </label>
            </div>
        </div>
    </div>

    <div class="form-group" style="display: inline-block;border: 2px solid green;">
        <label >是否推荐</label>
        <div class="radio">
            <div class="radio radio-inline radio-success">
                <input id="addRecommended_0" type="radio" name="addRecommended" value="0" checked>
                <label for="addRecommended_0">正常 </label>
            </div>
            <div class="radio radio-inline">
                <input id="addRecommended_1" type="radio" name="addRecommended" value="1">
                <label for="addRecommended_1">锁定 </label>
            </div>
        </div>
    </div>

    <hr>
    <button id="addArticle" type="button" class="btn btn-primary" style="display: block;margin-left:1200px;">
        确定新增
    </button>
</div>

<script>
    editormd("test-editormd", {
        width   : "90%",
        height  : 440,
        emoji: true,
        syncScrolling : "single",
        path    : '../../plugins/editormd/lib/',
        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
        saveHTMLToTextarea : true
    });

    $('#sel_productTag').select2({
        placeholder: "请至少选择一个人名",
        tags:true,
        createTag:function (decorated, params) {
            return null;
        },
        width:'256px'
    });

    $(".subOption").remove();
    $.ajax({
        type:'get',
        url:'${basePath}/type/list?offset=10&limit=10',
        dataType:'json',
        success:function (data) {
            var list = data.rows;
            for(var i = 0;i<list.length;i++){
                $("#sel_productTag").append("<option id="+list[i].id+' class="subOption"'+" value=\"mingren\">"+list[i].name+"</option>");
            }
        }
    });

    $("#addArticle").on("click",function(){
        var addTitle = $("#addTitle").val();
        var addCover_image = $("#addCover_image").val();
        var addDescription = $("#addDescription").val();
        var addKeywords = $("#addKeywords").val();
        var addContent = $("#articleContent").val();
        var addTypeId ="";
        $("#sel_productTag").find("option:selected").each(function () {
            addTypeId += $(this).attr('id') + ",";
        })
        addTypeId = addTypeId.substr(0, addTypeId.length - 1);
        var addStatus = $('input:radio[name="addStatus"]:checked').val();
        var addRecommended = $('input:radio[name="addRecommended"]:checked').val();

        var article = {user_id:${sessionScope.userId},title:addTitle,cover_image:addCover_image,content:addContent,type_id:addTypeId,status:addStatus,recommended:addRecommended,description:addDescription,keywords:addKeywords};
        $.ajax({
            url:'${basePath}/article/create',
            type:"post",
            dataType:'json',
            data:article,
            success:function (result) {
                if (result.result == "success"){
                    $('#tab__article_addArticle', window.parent.document).remove();
                    $('#table', window.parent.document).bootstrapTable('refresh');
                    parent.window.Tab.addTab('文章管理', '/article/index');
                    var $iframe = $('#iframe__article_index', window.parent.document).find('iframe');
                    $iframe.attr('src', $iframe.attr('src'));
                }else{
                    alert("fail");
                }
            }
        })
    });
</script>
</body>

</html>